<script setup lang="ts">
    import { reqGetSearch } from "@/api/search";
    import { ref } from "vue";
    import { useRoute } from "vue-router";
    import { SearchRes } from "@/types/search";

    const list = ref<SearchRes>([]);
    const loading = ref(false);
    const finished = ref(false);
    const page = ref(1);
    const route = useRoute();
    // 无限加载
    const onLoad = async () => {
        const { data } = await reqGetSearch(route.query.keywords, page.value);
        // 把每次加载的结果追加到this.list后面
        const arr = data.data.results;
        list.value = [...list.value, ...arr];
        page.value++;
        // 把loading关闭
        loading.value = false;
        // 判断是否已经全部加载了数据
        if (arr.length === 0) finished.value = true;
    };
</script>
<template>
    <div class="search-result">
        <!-- 导航栏 -->
        <van-nav-bar
            :title="$route.query.keywords + '的搜索结果'"
            left-arrow
            fixed
            @click-left="$router.back()" />
        <!-- /导航栏 -->

        <!-- 文章列表 -->
        <van-list
            class="article-list"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <van-cell
                v-for="item in list"
                :key="item.art_id.toString()"
                :title="item.title"
                @click.native="
                    $router.push({
                        path: '/article',
                        query: { id: item.art_id },
                    })
                " />
        </van-list>
        <!-- /文章列表 -->
    </div>
</template>

<style lang="scss" scoped>
    .search-result {
        .article-list {
            margin-top: 39px;
        }
    }
</style>
